<template>
	<view>
		<scroll-view :enable-back-to-top="true" :refresher-enabled="true" :refresher-triggered="triggered"
			:scroll-y="true" class="my-content" lower-threshold="50" @refresherrefresh="scrolltolower1()"
			@scrolltolower="scrolltolowers()">
			
			<view class="itemBox">
				
				<!--显示列表-->
				<!-- <view style="flex: 1; padding:  34.88rpx;">
					<Item v-for="i in sotreData1" :key="i.id" :type="type" :item="i" @click.native="details(i)"
						@communicates="communicates" @communicate="communicate" @userPage="userPage"></Item>
				</view> -->
				
				<view style="background: #fff;border-radius: 24rpx;padding: 20rpx;margin-bottom: 20rpx;" v-for="(item, index) in sotreData1" :key="index">
					<template>
						<view class="flex u-margin-top-20">		
							<view class="productImg" v-if="release_type=='goods'">
								<block v-if="((item.logo)&&(item.logo!=0)&&(item.logo!='0')&&(item.logo!=null)&&(item.logo!=undefined)&&(item.logo!='undefined'))">
									<image class="img" mode="aspectFill" :src="toImages(item.logo)">
									</image>
								</block>
								<block v-else>
									<image class="img" mode="aspectFill" v-if="i" v-for="(i,j) in storeImages(1, item.buy_images)"
									 :key="j"	:src="toImages(i)">
									</image>
								</block>
							</view>
							<view class="productImg" v-else-if="release_type=='user'">
								<block v-if="((item.avatar)&&(item.avatar!=0)&&(item.avatar!='0')&&(item.avatar!=null)&&(item.avatar!=undefined)&&(item.avatar!='undefined'))">
									<image class="img" mode="aspectFill" :src="toImages(item.avatar)" style="border-radius: 126px;width: 126px;height: 126px;">
									</image>
								</block>
							</view>
							<view class="productImg" v-else>
								<block v-if="((item.images)&&(item.images!=0)&&(item.images!='0')&&(item.images!=null)&&(item.images!=undefined)&&(item.images!='undefined'))">
									<image class="img" mode="aspectFill" :src="toImages(item.images)">
									</image>
								</block>
								<block v-else>
									<image class="img" mode="aspectFill" v-if="i" v-for="(i,j) in storeImages(1, item.images)"
									 :key="j"	:src="toImages(i)">
									</image>
								</block>
							</view>
							
							<view @click="details(item)" style="flex: 1;">
								<view class="lineP">
									<view class="title u-line-3" v-if="release_type=='goods'">{{item[$t('item.name')] || $t("暂无信息")}}</view>
									<view class="title u-line-3" v-else-if="release_type=='transport'">{{$t(item.mode) || $t("暂无信息")}}</view>
									<view class="title u-line-3" v-else-if="release_type=='crossborder'">{{$t(item.goods_name) || $t("暂无信息")}}</view>
									<view class="title u-line-3" v-else-if="release_type=='professional'">{{lang=='zh'?item.person_name:item.person_name_ru || $t("暂无信息")}}</view>
									<view class="title u-line-3" v-else-if="release_type=='user'">{{lang=='zh'?item.username:item.username_ru || $t("暂无信息")}}</view>
								</view>
								
								<view v-if="release_type =='user'"  style="height: 80rpx;word-break: break-word;">
									{{$t(item.mobile) || $t("暂无信息")}}
								</view>
								
								<view class="lineP flexClum u-margin-top-20" v-if="release_type!='professional' && release_type!='user'">
									<view class="label title_red  u-font-24">
										<image style="width: 30rpx;height: 30rpx;margin-right: 10rpx;"
											:src="HTTP_IMG_UTL+'transportIcon1.png'"> </image>
										{{$t("货源地")}}
									</view>
									<block v-if="item.hwdd">
										<view class="text u-line-2 u-font-24" style="height: 80rpx;word-break: break-word;">
											{{ replaceSpaceWithComma(item.hwdd) || $t("暂无信息")}}
										</view>	
									</block>
									<block v-else>
										<view v-if="lang=='zh'" class="text u-line-2 u-font-24" style="height: 80rpx;word-break: break-word;">
										{{ replaceSpaceWithComma(item.reach_city.mergename)|| $t("暂无信息") }}	
										</view>
										<view v-if="lang!='zh'" class="text u-line-2 u-font-24" style="height: 80rpx;word-break: break-word;">
										{{ replaceSpaceWithComma(item.reach_city.mergename_ru)|| $t("暂无信息") }}	
										</view>
									</block>
								</view>
								
								<view class="lineP" style="align-items: center;display: none;">
									<view class="block">
										{{ item[$t('item.goods_num')] || '' }}
									</view>
									<view class="u-font-32">{{ item[$t('item.number_unit')]}}</view>
								</view>
								
								<view class="lineP title_red u-font-34" style="justify-content: flex-end;align-items: baseline;">
									<view style="width: 40%;" v-if="release_type=='goods'">
										<image :src="toImages('/uploads/20240514/2910b0256c8740723c7527820a5339d0.png')" style="width: 40rpx;height: 20rpx;"></image>
										<text style="color: #999999;height: 30rpx;line-height: 30rpx;font-size: 24rpx; ">{{ item[$t('view_count')]}}</text>
									</view>
					
									<view v-if="lang==='zh' && release_type=='goods'" style="width: 60%; text-align: right; ">
										{{ item[$t('desire_price')]}}
										<text class="small u-font-28 u-margin-left-10">
											{{$t(item.price_unit)}}/{{ item[$t('item.number_unit')]}}
										</text>
									</view>
									<view v-if="lang !='zh' && release_type=='goods'" style="width: 60%; font-size: 28rpx; text-align: right; ">
										{{ item[$t('desire_price')]}}
										<text class="small u-margin-left-10" style="font-size: 20rpx;">
											{{$t(item.price_unit)}}/{{ item[$t('item.number_unit')]}}
										</text>
									</view>
								</view>
								
							</view>	
						</view>
					</template>
				</view>
				
			</view>
		</scroll-view>
		<Service />
		<vipPopup v-if="vipShow" :show="vipShow" @change="clickVipPopup" />
	</view>
</template>

<script>
	import {
		createC2CConversation,
		isBase64,
		time
	} from "@/common/public";
	
	import {
		IMAGE_URL,IMAGE_PIC,HTTP_IMG_UTL
	} from "@/config/app";
	
	//客服
	import Service from '@/components/service/service.vue'
	//列表
	import Item from '@/components/detail/GoodsItem2.vue'
	//VIP弹窗
	import vipPopup from "@/components/vipPopup/index.vue";

	export default {
		components: {
			Service,
			vipPopup,
			Item
		},
		data() {
			return {
				HTTP_IMG_UTL,
				imgUrl:'',	//图片地址
				contentScrollW: 0, // 导航区宽度
				curIndex: 0, // 当前选中
				scrollLeft: 0, // 横向滚动条位置

				lang: getApp().globalData.lang, // 语言
				type: null, // (列表分类 区别 推广还是竞标   1推广 2竞标 )
				searchValue: "", //搜索内容
				
				//地区筛选器
				currentCity_name:'地区',//筛选器回显文字
				countryCurrent: null,	//国家id
				provinceCurrnet: null,	//省id
				cityCurrent: null,		//市id
				
				category: "", 			//类目id
				integral: "", 			//评分
				currentCity: "", 		//选中的城市 用来传参
				
				
				area: [],				//国家列表
				province: [],			//省列表
				city: [],				//市列表
				
				//类目列表 getActionSheetLists 接口 传'release_goods'  返回所有类目列表
				release_goods: [{
					label: '',
					label_ru: '',
					value: '',
					image:HTTP_IMG_UTL+'all.png',
					image_ru:HTTP_IMG_UTL+'all_ru.png',
					current_image:HTTP_IMG_UTL+'all1.png',
					current_image_ru:HTTP_IMG_UTL+'all_ru1.png'
				}], 		
				
				
				score: [], 				//评分列表 getActionSheetLists 接口 传'score'  返回所有评分列表[100,90][90,80] 作废了
				
				scoreSortValue: "",		//评分值
				
				scoreSort: [{			//正序倒序选择排序数组
						label: this.$t('正序'),
						label_ru: this.$t('正序'),
						value: "ASC",
					},
					{
						label: this.$t('倒序'),
						label_ru: this.$t('倒序'),
						value: "DESC",
					}
				],
				sotreData1: [], 	//列表数据
				
				//四个分类
				classCurrent: "",	//货物所在地 选中的分类id
				classification: [ 	//分类数组
					{
						id: 1,
						title: "中国货物",
						url: "https://gluz-oss.oss-cn-beijing.aliyuncs.com/uploads/20231101/99b3e2e34d1a000b681e45471d091d73.png"
					},
					{
						id: 2,
						title: "俄罗斯货物",
						url: "https://gluz-oss.oss-cn-beijing.aliyuncs.com/uploads/20231101/99b3e2e34d1a000b681e45471d091d73.png"
					},
					{
						id: 3,
						title: "在俄中国货物",
						url: "https://gluz-oss.oss-cn-beijing.aliyuncs.com/uploads/20231101/f3163bd0f89f8a641b68068176988800.png"
					},
					{
						id: 4,
						title: "在中俄罗斯货物",
						url: "https://gluz-oss.oss-cn-beijing.aliyuncs.com/uploads/20231101/f3163bd0f89f8a641b68068176988800.png"
					},
				],
				
				page: 1,			//分页
				datalist: [],		//数据列表
				
				triggered: false,	//刷新设置
				
				auth: '',				//用户权限 getUserAuth 这个接口返回
				
				vipShow: false,			//默认vip弹窗为false
				//后台开关验证 vip权限
				vip:false,
				
				cardColor: "#fefcf6",	//竞标的卡片背景色
				release_type:'',
				user_id:0,
			};
		},
		
		onLoad(option) {
			uni.showLoading({
				title: "Loading...",
				mask: true
			})
			this.type = parseInt(option.type)
			console.log({'type':option.type}," 1推广 2竞标 3用户")
			this.release_type = option.name
			this.user_id=option.id
			this.GoodsList()		//获取货物列表信息
			this.getareaOptions()	//获取城市信息
			// this.getAxios()			//统一发送请求 请求类目和评分列表
			if (this.type === 1) {
				this.cardColor = '#FFF'		//推广的卡片背景色
			}
			this.imgUrl = IMAGE_PIC			//图片远程域名
		},
		onReady() {
			// this.getScrollW()				//样式调整
			uni.setNavigationBarTitle({		//自定义标题
				title: this.$t("关注列表")
			})
			this.getUserAuth() 				// 获取用户权限
			this.$u.api.user.appCheck().then(res => {
				this.report = res.report
				this.vip = res.vip
			})
		},
		methods: {
			time,
			replaceSpaceWithComma(str) {   //过滤横杠为逗号 清除两端逗号
				if(str){
					str = str.replace(/-/g, ',');
					str = str.replace(/^[,]+|[,]+$/g, '');
					return str;
				}else{
					return str;
				}
			},
			clickVipPopup() {
				this.vipShow = false		//点击vip弹窗隐藏
			},
			userPage(e) {					//item子组件 点击头像 跳个人主页	
				this.$u.route({
					url: 'pages/user/homePage/homePage',
					params: {
						id: e.user_id
					}
				})
			},
			//item子组件 点击商品 跳转商品详情
			details(i) {
				if(this.release_type=='goods'){
					this.$u.route({
						url: "/pages/index/detail/detail",
						params: {
							id: i.id,
							type: this.type,
							releaseType: 'goods'
						}
					})
				}else if(this.release_type=='transport'){
					this.$u.route({
						url: "/pages/index/detail/detail",
						params: {
							id: i.id,
							type: this.type,
							releaseType: 'transport'
						}
					})
				}else if(this.release_type=='crossborder'){
					this.$u.route({
						url: "/pages/index/detail/detail",
						params: {
							id: i.id,
							type: this.type,
							releaseType: 'crossborder'
						}
					})
				}else if(this.release_type=='professional'){
					this.$u.route({
						url: "/pages/index/detail/detail",
						params: {
							id: i.id,
							type: this.type,
							releaseType: 'professional'
						}
					})
				}else if(this.release_type=='user'){
					this.$u.route({
						url: "/pages/user/homePage/homePage",
						params: {
							id: i.id,
							type: this.type,
							// releaseType: 'user'
						}
					})
				}
				
			},
			// 下拉刷新
			scrolltolower1(e) {				
				//刷新加载圈显示 清空(输入框  货物所在地分类id  选中地区  类目id  评分数据) 刷新商品列表
				this.triggered = true;
				this.page = 1
				this.searchValue = ""			
				this.classCurrent = ""
				this.currentCity = ""
				this.category = ""
				this.score = []
				this.sotreData1 = []
				this.GoodsList(false)
			},
			// 滑轮滚动到顶
			scrolltolowers(e) {
				if (this.datalist.length === 0) {
					// this.$u.toast("没有数据了...")
					return
				}
				this.GoodsList(false)
			},
			// item子组件 点击按钮 触发聊天
			communicates(i) {
				createC2CConversation(i.user.mobile, this)
			},
			// 点击 招标比价  跳入推广发布页面
			fabua(i){
				uni.navigateTo({
					url:"/pages/release/goods/form"
				})
			},
			// 当选项框被关闭
			closes() {
				this.GoodsList()
			},
			// 用户权限 验证是否是vip
			getUserAuth() {
				const that = this
				that.$u.api.user.getUserAuth().then(res => {
					that.auth = res
					uni.hideLoading()
				})
			},
			//统一发送请求 请求类目和评分列表
			getAxios() {
				this.getActionSheetLists()
				this.getActionSheetLists({
					type: "score"
				})
			},
			// item子组件 点击按钮 （招标比价或竞标） shuxing为1是招标比价或竞标按钮  否则点的是联系按钮
			communicate(i,shuxing,type) {
				if(shuxing==1){
					if(type==1){
						this.fabua(i);
					}else{
						const mobile = uni.getStorageSync('mobile');
						if (mobile === i.user.mobile) {
							this.$u.toast(this.$t('不能参与自己'));
							return false
						}
						var that = this
						that.$u.api.user.order_join_day_auth({
							lang:that.lang
						}).then(res => {
							if(res==1){
								//参与
								that.$u.route({
									url: '/pages/order/process/buildOrder',
									params: {
										type: "goods",
										release_id: i.id,
									}
								})
							}else{
								if(that.vip){
									that.vipShow = true // 弹出vip购买弹窗
									return
								}else{
									uni.showModal({
										content: that.$t('您的权限不足哦!请联系工作人员!'),
										showCancel: false,
										confirmText: that.$t('是'),
									})
									return false;
								}
							}
						})
					}
				}else{		
					this.communicates(i)		
				}
			},
			//获取城市信息
			getareaOptions() {
				this.$u.api.basic.getSelectCityList({is_port:true}).then(res => {
					this.area = res
				})
			},
			//获取类目信息
			getActionSheetLists(data = {
				type: "release_goods"
			}) {
				this.$u.api.basic.getActionSheetList(data).then(res => {
					if (data.type === "release_goods") {
						res.forEach(item => {
							this[data.type].push({
								label: item.name,
								label_ru: item.name_ru,
								value: item.id,
								image:this.imgUrl+item.image,								
								image_ru:this.imgUrl+item.image_ru,
								current_image:this.imgUrl+item.current_image,
								current_image_ru:this.imgUrl+item.current_image_ru,

							})
						})
						return
					}
					if (data.type === "score") {
						res.forEach((item, index) => {
							this.score.push({
								label: item.join("-"),
								label_ru: item.join("-"),
								value: index + 1,
							})
						})
					}
				})
			},
			//清除控件
			clear() {
				//获取分类
				this.GoodsList()
			},
			//搜索
			searched(value) {
				//获取分类
				this.GoodsList()
			},
			//获取货物列表信息
			GoodsList(isSearch = true) {
				uni.showLoading({
					title: "Loading...",
					mask: true
				})
				if (isSearch) {
					this.sotreData1 = []
					this.page = 1
				}
				let data = {
					page: this.page,
					type: this.type,
					searchKey: this.searchValue,
					goods_type: this.classCurrent,
					departure_city: this.currentCity,
					category_id: this.category,
					release_type:this.release_type,
					user_id:this.user_id,
					// score: this.score.filter(item => item.value === this.integral)[0]?.label || "",
					score_sort: this.scoreSortValue
				}
				this.$u.api.collection.getGuanZhuList(data).then(res => {
					if (!res) {
						this.$u.toast(this.$t('没有数据了'))
					} else {
						// this.sotreData1.push(...res)
						this.sotreData1=res
						this.datalist = res
						this.triggered = false
						this.page++
					}
					uni.hideLoading()
					
				})
			},
			
			//切换货物所在地 分类id
			change(id) {
				this.classCurrent = id
				this.GoodsList()
			},
			//国家点击
			countryClick(id, children,name) {
				this.province = []
				this.city = []
				this.province = children
				this.currentCity = name
				this.currentCity_name = name
				this.countryCurrent = id
				this.GoodsList()
			},
			//省点击
			provinceClick(id, children,name) {
				this.city = []
				this.city = children
				this.currentCity = name
				this.currentCity_name = name
				this.provinceCurrnet = id
				this.GoodsList()
			},
			//市点击
			cityClick(id, city) {
				this.currentCity = city
				this.currentCity_name = city
				
				this.cityCurrent = id
				
				this.GoodsList()
				this.$refs.uDropdown.close();
			},
			
			//切换选中的评分
			changeScoreSort(value, type) {
				this.GoodsList()
			},
			//选择类目（作废）
			changeCategory(value) {
				this.GoodsList()
			},
			//选择类目 （新的）
			changeCategorys(index,category_id) {
			  this.curIndex = index;
			  this.category = category_id
			  // 效果一(当前点击子元素靠左展示)  局限性：子元素宽度相同
			  this.scrollLeft = index  * this.release_goods[index].width
			  this.GoodsList()
			},
			// 获取标题区域宽度，和每个子元素节点的宽度以及元素距离左边栏的距离
			getScrollW() {
			  const query = uni.createSelectorQuery().in(this);
			  query.select('.content-scroll').boundingClientRect(data => {
				// 拿到 scroll-view 组件宽度
				this.contentScrollW = data.width
			  }).exec();
			  query.selectAll('.scroll-item').boundingClientRect(data => {
				let dataLen = data.length;
				for (let i = 0; i < dataLen; i++) {
				  //  scroll-view 子元素组件距离左边栏的距离
				  this.release_goods[i].left = data[i].left;
				  //  scroll-view 子元素组件宽度
				  this.release_goods[i].width = data[i].width
				}
			  }).exec()
			}
		},
		onReady() {
			uni.setNavigationBarTitle({
				title: this.$t("我的关注")
			})
		},
		computed: {
			isCountry() {
				return (id) => {
					return this.countryCurrent === id ? "#EF692A" : ""
				}
			},
			isProvince() {
				return (id) => {
					return this.provinceCurrnet === id ? "#EF692A" : ""
				}
			},
			classCity() {
				return (id) => {
					return this.cityCurrent === id ? 'currCity' : ''
				}
			},
			toImages() {
				return (src) => {
					try {
						return isBase64(src) ? src : IMAGE_URL + src
					} catch (e) {
						
					}
				}
			},
			storeImages() {
				return (sum, images) => images.length > sum ? images.splice(sum) : images
			},
			returnClass() {
				return (id) => {
					return id === this.classCurrent ? "search_class_item currentClass" : "search_class_item"
				}
			}
		}
	}
</script>

<style lang="scss" scoped>
	.my-content {
		background-color: $my-bgColorF6F6F6;
		height: 100vh;
	}
	
	.dropdown_ru{ height: 90rpx !important; }
	.nav_ru{ height: 70rpx !important; }

	//搜索框
	.search {
		display: flex;
		flex-direction: column;
		// background-color: $my-bgColorFFFFFF;
		margin-bottom: 27.91rpx;

		.search_class {
			display: grid;
			justify-content: space-between;
			grid-template-columns: repeat(2, 315.7rpx);
			margin-top: 15.7rpx;

			.search_class_item {
				margin-top: 15.7rpx;
				height: 99.42rpx;
				border-radius: 20rpx;
				overflow: hidden;
				font-size: 24rpx;
				font-weight: 500;
				color: rgba(255, 255, 255, 0.88);
				line-height: 35rpx;
				display: flex;
				justify-content: flex-end;
				align-items: center;
				padding-right: 15rpx;

				._item {
					// word-break: break-all;
					width: 184rpx;
					text-align: center;
				}
			}
		}
	}

	.currentClass {
		border: #FF4D2F solid 1rpx;
	}

	.bidding_news {
		display: flex;
		justify-content: center;
		margin-bottom: 16rpx;

		.bidding_card {
			width: 692rpx;
			background: $my-bgColorFFFFFF;
			box-shadow: 3rpx 7rpx 3rpx 0rpx rgba(234, 234, 234, 0.5);
			border-radius: 14rpx;
			overflow: hidden;
			padding-bottom: 40rpx;

			.bidding_user {
				display: flex;
				flex-direction: row;
				align-items: center;
				padding: $my-padding-20;

				.bidding_user_text {
					padding-left: 8rpx;
					height: 76rpx;
					padding-top: 14rpx;

				}

				//头像大小
				.bidding_user_image {
					// padding-left: $my-padding-10;
					height: 100rpx;
					width: 100rpx;
					border-radius: 50%;
					border: 1rpx solid orange;
					box-sizing: border-box;
				}

				//用户图标
				.bidding_user_icon {
					padding-left: $my-padding-10;
					height: 35rpx;
					width: 35rpx;
				}

			}

			//商品的简介
			.biddin_synopsis {
				display: flex;
				flex-direction: column;
				justify-content: flex-start;
				padding: 0 $my-padding-20 $my-padding-20 $my-padding-20;

				.bidding_synopsis_sel {
					padding: 5.23rpx 0 0 0;
					font-size: $my-font-size21;
					font-weight: 400;
					color: #0B0B0B;
					line-height: 40rpx;

					& text:first-child {}

					& text:last-child {
						// font-weight: 600;
					}
				}
			}

			//商品图片展示区
			.bidding_image {
				padding: $my-padding-10 0 0 $my-padding-20;

				image {
					width: 229.07rpx;
					height: 225.58rpx;
					margin: 0 30rpx 30rpx 0;
					border-radius: 20rpx;
					box-shadow: 0px 0px 8px 0px #ababab;
				}
			}

			//地址信息
			.bidding_address {
				padding: 13.6rpx $my-padding-20 10rpx $my-padding-20;
				display: flex;
				flex-direction: row;
				justify-content: space-between;
				font-size: $my-font-size21;
				font-weight: 400;
				color: #888888;
				line-height: 30rpx;

				.bidding_ares {
					flex: 1;
					display: flex;
					flex-direction: column;
					justify-content: flex-start;

					.bidding_ares1 {
						word-break: break-all;
						display: flex;

						image {
							width: 24.42rpx;
							height: 31.4rpx;
							float: left;
						}
					}
				}
			}
		}
	}

	.image_show {
		display: flex;
		padding: 0 20rpx;

		.left {
			width: 52%;
			// margin-right: 20rpx;
		}

		.right {
			width: 46%;

			.top {
				margin-bottom: 20rpx;
			}

			.bottom {
				image {
					width: 270rpx;
					height: 160rpx;
				}

			}
		}
	}

	.description {
		color: #fff;
		display: flex;
		padding: 0 20rpx 6rpx 20rpx;
		font-size: 28rpx;

		.brand {
			background-color: #00a0e9;
			border-radius: 10rpx;
			padding: 0 20rpx;
			margin: 18rpx 0;
		}

		.weight {
			background-color: #13b5b1;
			border-radius: 10rpx;
			padding: 0 20rpx;
			margin-right: 8rpx;
		}

		.volume {
			background-color: #ef9b17;
			border-radius: 10rpx;
			padding: 0 8rpx;
		}
	}

	.region {
		height: 500rpx;
		background-color: #FFFFFF;
		display: flex;
		flex-direction: row;

		.country {
			//flex: 1;
		}

		.province {
			height: 100%;
			// flex: 1;
			// overflow: scroll;
		}

		.city {

			display: grid;
			grid-template-columns: repeat(3, 103rpx);
			// grid-template-rows: repeat(20, 70rpx);
			justify-content: space-around;
			overflow: scroll;
			padding-bottom: 20rpx;

			view {
				margin-top: 20rpx;
				width: 100rpx;
				min-height: 50rpx;
				text-wrap: normal;
				background: #EEEEEE;
				border-radius: 14rpx;
				font-size: 21rpx;
				font-weight: 400;
				color: #000000;
				padding: 10rpx;
				line-height: 30rpx;
				display: flex;
				justify-content: center;
				align-items: center;
				word-break: break-word;
			}
		}

	}

	.currCity {
		background-color: #EF692A !important;
		color: #FFFFFF !important;
	}

	.bidding_address {
		margin-bottom: 8rpx;
	}

	.bidding_betwn {
		display: flex;
		justify-content: space-between;
		align-items: center;
	}

	.title_red {
		color: #e71818;
		font-weight: bolder;
	}

	.bottom {
		margin-left: 16rpx;
	}

	.price_content {
		color: #e71818;

		.price {
			font-size: 50rpx;
		}
	}
	
	.nav_z{
		width: 80%;height:50rpx;display: flex;position: absolute;top: 15rpx; left: 20%;
	}
	
	.tab_nav{ width: 22%;margin-left: 2%; line-height: 50rpx;text-align: center;border-radius: 10rpx;   color: #606266;font-size: 24rpx ;background-color: rgb(237, 237, 237);}
	.tabnav_ru{width: 22%;margin-left: 2%;line-height: 35rpx; text-align: center;border-radius: 10rpx;   color: #606266;font-size: 18rpx ;background-color: rgb(237, 237, 237);}
	
	.tab_nav_on{ color: #fff !important;background-image: linear-gradient(to right, #ffd234, #ff884d) !important;}
	
	/*横向滚动操作*/
	.lxy-content {
	  width: 100%;
	  height: 100rpx;
	  box-sizing: border-box;
	  margin-top: 15rpx;
	  margin-left:0%;
	  .content-scroll {
	    height: 100rpx;
	    white-space: nowrap;
	    .scroll-item {
	      height: 64rpx;
	      line-height: 62rpx;
	      background: #FFFFFF;
	      border-radius: 10rpx;
	      display: inline-block;
	      text-align: center;
	      font-size: 28rpx;
	      font-family: PingFang SC;
	      font-weight: 400;
	      color: #666666;
	      margin-right: 28rpx;
	      padding-right: 0 24rpx;
	      &.active {
	        color: #FFFFFF;
	      }
	    }
	    .scroll-item:last-child{
	      margin-right: 28rpx;
	    }
	  }
	}
	.release_img{ width: 100rpx; height:100rpx ; }
	.release_goods_img{ width: 170rpx; height:100rpx ; }
	
	.itemBox {
		margin: 0 auto;
		box-shadow: 0 0 10px #ddd;
		background: #ddd;
		padding: 10px;
		// border-radius: 20rpx;
		// background: #fff;
		margin-bottom: 20rpx;
		position: relative;
	
		&.yellow {
			background: #fefcf6;
		}
	
		.title_red {
			font-weight: 600;
			color: #e33a13;
		}
	
		.priceBox {
			background: linear-gradient(90deg, #fe4e31, #ffcd84);
			border-radius: 20rpx;
			padding: 15rpx 30rpx;
			color: #fff;
			font-size: 50rpx;
			padding-top: 40rpx;
			margin-top: -60rpx;
			margin-bottom: 10rpx;
	
			.small {
				margin-left: 10rpx;
				font-size: 30rpx;
			}
	
			&.jingpai {
				background: linear-gradient(-90deg, #fe4e31, #ffcd84);
				text-align: right;
			}
		}
	
		.lineP {
			margin: 0 auto;
			margin-bottom: 10rpx;
			display: flex;
			width: 90%;
	
			.block {
				border-radius: 10rpx;
				border: 1px solid #666;
				padding: 10rpx 6rpx;
				margin-right: 15rpx;
				width: 80rpx;
				text-align: center;
			}
	
			.label {
				// flex: 1;
			}
	
			.text {
				// margin-top: 10rpx;
				// flex: 1;
				// margin-left: 20rpx;
				overflow: hidden;
				// white-space: nowrap;
				text-overflow: ellipsis;
			}
	
	
	
			.price {
				font-size: 50rpx;
				font-weight: normal;
	
				.small {
					font-size: 24rpx;
				}
			}
		}
	
		.xiaorenBox {
			// position: absolute;
			// bottom: 80rpx;
			// transform: rotate(180deg, 180deg);
	
			.xiaoren {
				width: 220rpx;
				height: 100rpx;
				position: relative;
				// top: 90rpx;
			}
		}
	
		.flex {
			display: flex;
			justify-content: space-between;
	
			.flexClum {
				display: flex;
				flex-direction: column;
				align-content: center;
				align-items: flex-start;
				justify-content: center;
	
				&.jingpai {
					align-content: baseline;
					justify-content: flex-end;
					flex-wrap: wrap;
					align-items: flex-start;
					flex-direction: row;
				}
	
	
				.xiaoren {
					width: 220rpx;
					height: 100rpx;
					position: relative;
					top: 90rpx;
				}
			}
		}
	
		.productImg {
			position: relative;
			margin-right: 20rpx;
			.img {
				width: 240rpx;
				height: 270rpx;
				overflow: hidden;
				border-radius: 20rpx;
				// box-shadow: 0 0 20rpx #ddd;
			}
		}
	
		//地址信息
		.bidding_address {
			padding: 13.6rpx $my-padding-20 10rpx $my-padding-20;
			display: flex;
			flex-direction: row;
			justify-content: space-between;
			font-size: $my-font-size21;
			font-weight: 400;
			color: #888888;
			line-height: 30rpx;
	
			.bidding_ares {
				flex: 1;
				display: flex;
				flex-direction: column;
				justify-content: flex-start;
	
				.bidding_ares1 {
					display: flex;
					justify-content: flex-start;
	
					image {
						width: 24.42rpx;
						height: 31.4rpx;
					}
				}
			}
		}
	
		.bidding_betwn {
			display: flex;
			// justify-content: space-between;
			align-items: flex-end;
	
			.chat {
				transform: translateY(0rpx);
			}
	
			.userName {
				min-height: 50rpx;
	
				.bidding_user_text {
					display: block;
					padding-left: 0;
				}
	
				.country_icon {
					padding-left: 0;
				}
			}
	
			.flex {
				display: flex;
				justify-content: space-between;
				align-items: center;
			}
	
	
			.bidding_user {
				display: flex;
				flex-direction: row;
				align-items: center;
				// padding: $my-padding-20;
				margin-right: 10rpx;
	
	
				//头像大小
				.bidding_user_image {
					padding-left: $my-padding-10;
					height: 50rpx;
					width: 50rpx
				}
	
				//用户图标
				.bidding_user_icon {
					padding-left: $my-padding-10;
					height: 35rpx;
					width: 35rpx;
				}
			}
		}
	
		.title {
			// color: #e43b14;
			font-size: 30rpx;
			// border-bottom: 1rpx solid #cccccc;
			font-weight: 600;
			// padding-bottom: 50rpx;
			margin-bottom: 10rpx;
			word-break: break-word;
			height: 80rpx;
			// padding-left: 28rpx;
	
			&.none-border-bottom {
				border-bottom: none;
			}
		}
	
		.type {
			display: flex;
			justify-content: space-between;
			align-items: flex-end;
			padding-left: 10rpx;
			padding-right: 22rpx;
			// width: 90%;
			// margin: 0 auto;
		}
	
		.address {
			margin-bottom: 32rpx;
			font-size: 30rpx;
			position: relative;
			padding-left: 45rpx;
			// font-weight: 600;
	
			// .warp {
			// 	width: 55%;
			// }
	
			.headline_img {
				position: absolute;
				left: 0;
				top: 4rpx;
				width: 30rpx;
				height: 30rpx;
			}
	
			.label {
				font-weight: 600;
				margin-bottom: 10rpx;
			}
		}
	}
</style>